<template>
  <div class="Mapbox">
    <div class="amap">
      <div id="container" class="container"></div>
      <div class="position">
        <div class="name">用户数：<span class="num">{{ baseinfo.userSize }}</span> 户</div>
        <div class="name">配电房：<span class="num">{{ baseinfo.switchroomSize }}</span> 个</div>
        <div class="name">安全运行：<span class="num">{{ baseinfo.userRunDays }}</span> 天</div>
      </div>
    </div>
    
  </div>
</template>

<script>
import imageUrl from '@/assets/energy-consumption/GeneralSituation/icon1.png'
import AMapLoader from "@amap/amap-jsapi-loader";

window._AMapSecurityConfig = {
  // 公司的安全密钥
  // securityJsCode: "98404c23880b42f03d5faaa96a51a4f4",
  // 我自己的安全密钥
  securityJsCode:"495b13f555dfc1483f5ab78c453e6315"
};
let AMap;
export default {
  name: "TestIndex",
  props: {
    baseinfo: {
      type:Object,
      default:()=>{}
    },
    mapmarkerlist: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      map: null,
      pointsss: [],
      infoWindow: null
    };
  },
  methods: {
    initMap() {
      var _that = this;
      AMapLoader.load({
        // 公司的Key
        // key: "36726b83d3822ae3f31648d75d5f64a2",
        // 我自己申请的key
        key:'501062f563d27a055ca9c3debff4e31e',
        version: "2.0",
        // 需要用到的插件
        plugins: [
          "AMap.Geocoder",
          "AMap.AutoComplete",
          "AMap.MarkerClusterer",
          "AMap.InfoWindow"
        ],
      }).then((_amap) => {
        AMap = _amap;
        let map = new AMap.Map("container", {
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          defaultCursor: "grab",
          center: this.pointsss[0]?.lnglat? this.pointsss[0].lnglat : [120.1302, 30.2593],
          // mapStyle: 'amap://styles/grey' // 设置地图样式为暗黑系
        });
        _that.map = map;
        // 初始化信息窗口
        _that.infoWindow = new AMap.InfoWindow({
          isCustom: true, // 使用自定义窗口
          closeWhenClickMap: true // 点击地图关闭信息窗口
        });
        var _renderMarker = function (context) {
          var content = `
              <div class="custom-content-marker">
               <img  class="img" src="${imageUrl}">
              </div>`;
          var offset = new AMap.Pixel(-1, -1);
          context.marker.setContent(content);
          context.marker.setOffset(offset);
          // 鼠标悬浮显示信息窗口
          context.marker.on("mouseover", (ev) => {
            var infoContent = `
              <div class="info-window-content" >
                <div class="title">${context.data[0].name}</div>
                <div class="info">
                  <div>地址：${context.data[0].address}</div>
                  <div class="label">
                    <div>严重告警：<span class="red color">${context.data[0].severeAlarm}</span> 条</div>
                    <div class="mobel">普通告警：<span class="orange color">${context.data[0].commonAlarm}</span> 条</div>
                    <div>轻微告警：<span class="yellow color">${context.data[0].minorAlarm}</span> 条</div>
                  </div>
                </div>
              </div>
            `;
            _that.infoWindow.setContent(infoContent);
            _that.infoWindow.open(map, context.marker.getPosition());
          });
          // 鼠标移出隐藏信息窗口
          context.marker.on("mouseout", (ev) => {
            _that.infoWindow.close();
          });
        };
        // 定义聚散
        var cluster = new AMap.MarkerCluster(map, this.pointsss, {
          gridSize: 60, // 设置网格像素大小
          renderMarker: _renderMarker, // 自定义非聚合点样式
        });
        var currentZoom = map.getZoom(); // 记录当前地图的缩放级别
        cluster.on("click", function (e) {
          // 放大地图
          if (currentZoom < 10) {
            map.setZoomAndCenter(10, e.lnglat);
            currentZoom = 10;
          } else {
            map.setZoomAndCenter(currentZoom + 2, e.lnglat);
            currentZoom += 2;
          }
        });
      });
    },
    goPath(UserInfo) {
      this.$router.push({
        path: '/UserHomePage',
        query: { UserInfo }
      })
    },
  },
  mounted() {
    this.pointsss = [];
    this.mapmarkerlist.forEach((ele) => {
      this.pointsss.push({
        lnglat: [+ele.longitude, +ele.latitude],
        name: ele.orgName,
        severeAlarm: ele.severeAlarm,
        commonAlarm: ele.commonAlarm,
        minorAlarm: ele.minorAlarm,
        address:ele.address
      });
    })
    this.initMap();
  },
  created() { },
  watch: {
    deep: true,
    immediate: true,
    mapmarkerlist(val) {
      if (!val.length == 0) {
        this.pointsss = [];
        this.mapmarkerlist.forEach((ele) => {
          this.pointsss.push({
            lnglat: [+ele.longitude, +ele.latitude],
            name: ele.orgName,
            severeAlarm: ele.severeAlarm,
            commonAlarm: ele.commonAlarm,
            minorAlarm: ele.minorAlarm,
            address:ele.address
          });
        })
        this.initMap();
      } else {
        this.pointsss = [];
        this.initMap();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@font-face {
    font-family: NumFont;
    /* src: url('../fonts/flatNum.ttf'); */
    src: url('../../../../assets/font/font/UnidreamLED.woff');
    unicode-range: U+30-39;
}
::v-deep .amap-marker {
  width: 40px !important;
  // position: ;
}
::v-deep .custom-content-marker {
  text-align: center;
}
::v-deep .img {
  width: 20px;
  height: 28px;
}
::v-deep .close-btn {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid #008cff;
  background-color: rgba(255, 255, 255, 0.5);
  color: #333;
  font-size: 12px;
  padding: 5px;
}
.custom-content-marker .close-btn:hover {
  background: #666;
}
.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}
.custom-content-marker img {
  width: 100%;
  height: 100%;
}
.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}
.custom-content-marker .close-btn:hover {
  background: #666;
}
.Mapbox {
  width: 100%;
  height: 100%;
  .amap{
    position: relative;
    .position{
      position: absolute;
      top: 0;
      width: 100%;
      background-color: #fff;
      height: 70px;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      .name{
        color: #e6e7e7;
        font-size: 14px;
        width: 33.33%;
        text-align: center;
        .num{
          font-family: NumFont;
          color: #ee8d2f;
          font-size: 30px;
        }
      }
    }
  }
}
::v-deep.amap {
  width: 100%;
  height: 100%;
  .el-form-item {
    .el-form-item__content {
      width: 100% !important;
      .el-select {
        width: 100% !important;
      }
    }
  }
  .container {
    width: 100%;
    height: 100%;
  }

}
.el-select {
  width: 1000px;
}
::v-deep .amap-logo {
  display: none!important;
  visibility: hidden!important;
}
::v-deep .amap-copyright {
  display: none!important;
  visibility: hidden!important;
}
::v-deep .info-window-content {
  border: 1px solid #13ccad;
  background-color: #fff;
  transition-duration: 1s;
  .title{
    text-align: center;
    background-color: #f1f1f1;
    height: 30px;
    line-height: 30px;
  }
  .info{
    padding: 20px;
    font-size: 14px;
    .label{
      margin-top: 10px;
      display: flex;
      .mobel{
        margin: 0 10px;
      }
      .color{
        font-size: 18px;
      }
      .red{
        color: red;
      }
      .orange{
        color: #ec7256;
      }
      .yellow{
        color: #e7d724;
      }
    }
  }
}
</style>